<!--创建时间：2022/3/30 14:12 描述：页面控制台 -->
<template>
  <view class="console-class">
    <movable-area class="movableArea">
      <movable-view
        @change="movabelViewChange"
        class="movableView" direction="all" :x="pos.x" :y="pos.y">
        <view @click="to_xfj_gg">控制台</view>
      </movable-view>
    </movable-area>
    <uni-popup
      class="console-view-class"
      ref="uniPopupRef"
      type="bottom"
    >
      <view class="console-content-class">
        <!--navBar-->
        <view class="nav-bar-class">
          <view
            class="item"
            :class="{'item-active': showValue === item.value}"
            v-for="(item) in navBarList"
            @click="navBarClick(item.value)"
          >{{item.name}}</view>
        </view>
        <!--   日志页面     -->
        <consoleVue
          v-if="showValue === 'console'"
        ></consoleVue>
        <!--   网络请求页面     -->
        <netWorkVue
          v-if="showValue === 'network'"
        ></netWorkVue>
        <!--   本地存储     -->
        <storgeVue
          v-if="showValue === 'storge'"
        ></storgeVue>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {addEvent, destroyEvent, getDate, installPageConsoleHook, setPosition} from './common.js'
import consoleVue from './components/console.vue'
import netWorkVue from './components/network.vue'
import storgeVue from './components/storge.vue'
export default {
  name: "PageConsolePageConsoleText",
  // 定义用到的组件
  components: {consoleVue, netWorkVue, storgeVue},
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins:[],
  // 属性定义使用对象的形式进行定义
  props: {
  },
  // 定义变量
  data() {
    return {
      navBarList:[
        {
          value: 'console',
          name: '控制台'
        },
        {
          value: 'network',
          name: '网络'
        },
        {
          value: 'storge',
          name: '本地存储'
        }
      ],
      showValue: '',
      pos: {
        x: 0,
        y: 0
      }
    }
  },
  // 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
  computed: {
    // pageConsoleTextProps(){
    //   return this.test;
    // },
    // pageConsoleTextProps2: {
		//		get(){
		//			//return this.name.split('').reverse().join('');
		//			return this.firstName+''+this.lastName;
		//		},
		//		set(value){
		//		}
    // }
  },
  // 监听属性值的变化
  watch:{
    // pageConsoleTextProps2: {
    //   handler(value, oldValue) {
    //
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  // 生命周期钩子函数begin
  // 在页面节点挂载完执行
  mounted() {
  },
  // 在页面创建完执行
  created() {
    installPageConsoleHook(getApp())
    addEvent()
  },
  beforeDestroy() {
    destroyEvent()
  },
  // 生命周期钩子函数end
  // 定义方法
  methods: {
    _showInit() {
      this.pos.x = getDate().x
      this.pos.y = getDate().y
      this.showValue = getDate().showValue
    },
    to_xfj_gg() {
      this.$refs.uniPopupRef.open()
    },
    navBarClick(value) {
      this.showValue = value
      getDate().showValue = value
    },
    movabelViewChange(e) {
      setPosition(e.detail.x, e.detail.y)
      this.pos.x = e.detail.x
      this.pos.y = e.detail.y
    }
  },
}
</script>
<style scoped lang="scss">
$contentWidth: 90rpx;
$contentHeight: 70rpx;
$contentFontSize: 28rpx;
.console-class{
  .movableArea {
    z-index: 1000000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;//设置area元素不可点击，则事件便会下移至页面下层元素
    .movableView {
      pointer-events: auto;//可以点击
      width: $contentWidth;
      height: $contentHeight;
      touch-action: none;

      view {
        width: $contentWidth;
        height: $contentHeight;
        line-height: $contentHeight;
        background-color: red;
        font-size: $contentFontSize;
        text-align: center;
        color: white;
      }
    }
  }
  .console-view-class{
    z-index: 1000001;
    .console-content-class {
      height: 80vh;
      background-color: white;
      .nav-bar-class{
        overflow-y: auto;
        height: $contentHeight;
        line-height: $contentHeight;
        display: flex;
        .item{
          margin-left: 16rpx;
          margin-right: 16rpx;
        }
        .item-active {
          border-bottom: 2px #1a5c22 solid;
        }
      }
    }
  }

}
</style>
